<template>
    <div>

        <el-card class="box-card">
            <div slot="header" class="clearfix">

                <el-row>
                    <el-button type="primary" size="mini"  @click="SearchClick">查询</el-button>
                    <el-button type="warning" size="mini"  @click="ResetClick">清空条件</el-button>

                </el-row>
            </div>
            <div>
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="searchForm.Name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="searchForm.Email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="searchForm.PhoneNumber" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
 						  <el-form-item label="角色" prop="RoleType">
                        <SigleSelect v-model="searchForm.RoleType" url="/Select/RoleType" columnName="Name"
                            columnValue="Code" columnLabel="Label"></SigleSelect>
                    </el-form-item>


                </el-form>
            </div>
        </el-card>


        <PaginationTable ref="PaginationTableId" url="/User/List" :column="dataColum">
            <template v-slot:header>
                <el-button type="primary" size="mini"  icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
                <ExportButton exportUrl="/User/Export" :where="searchForm"></ExportButton>

            </template>
            <template v-slot:Operate="scope">
                <el-button type="primary" size="mini"  @click="ShowEditModal(scope.row.Id)">修 改</el-button>
                <el-button type="danger" size="mini"  @click="ShowDeleteModal(scope.row.Id)" v-if="scope.row.RoleTypeFormat == '用户' && RoleType == '管理员'">删 除</el-button>
                
            </template>
        </PaginationTable>


        <el-dialog :title="formData.Id ? '修改用户' : '添加用户'" :visible.sync="editorShow" width="80%" :lock-scroll="true"
            min-height="800px">
            <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="账号" prop="UserName" placeholder="请输入账号">
                            <el-input v-model.trim="formData.UserName" :disabled='formData.Id != null'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="Password">
                            <el-input type="password" v-model.trim="formData.Password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" prop="RoleType">
                            <SigleSelect v-model="formData.RoleType" url="/Select/RoleType" columnName="Name"
                                columnValue="Code" columnLabel="Label"></SigleSelect>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="Email" placeholder="请输入邮箱">
                            <el-input v-model.trim="formData.Email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系方式" prop="PhoneNumber" placeholder="请输入联系方式">
                            <el-input v-model.trim="formData.PhoneNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生时间" prop="Birth" placeholder="请输入出生时间">
                            <el-date-picker v-model="formData.Birth" align="right" type="date" placeholder="选择出生时间"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="姓名" prop="Name" placeholder="请输入姓名">
                            <el-input v-model.trim="formData.Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图片" prop="ImageUrls">
                            <UploadImages :limit="1" v-model="formData.ImageUrls"></UploadImages>
                        </el-form-item>
                    </el-col>


                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
                        <el-button  @click="editorShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>



    </div>
</template>


<script>
import store from '@/store';
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
    name: "UserList",
    computed: {
        ...mapGetters([
            'Token', 'UserInfo', 'RoleType', 'HasUserInfo', 'ColumnType', "UserId"
        ])
    },
    data() {
        return {
            searchForm: {},
            editorShow: false,
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
                {
                    key: "RoleType",
                    hidden: true,

                },
                {
                    key: "UserName",
                    title: "账号",
                    type: store.getters.ColumnType.SHORTTEXT,

                },

                {
                    key: "Password",
                    title: "密码",
                    type: store.getters.ColumnType.SHORTTEXT,

                },
                {
                    key: "Email",
                    title: "邮箱",
                    type: store.getters.ColumnType.SHORTTEXT,

                },
                {
                    key: "Name",
                    title: "姓名",
                    type: store.getters.ColumnType.SHORTTEXT,

                },

                {
                    key: "ImageUrls",
                    title: "头像",
                    type: store.getters.ColumnType.IMAGES,

                },

                {
                    key: "PhoneNumber",
                    title: "手机号",
                    type: store.getters.ColumnType.PHONE,

                },
                {
                    key: "Birth",
                    title: "出生年月",
                    type: store.getters.ColumnType.DATE,

                },
                {
                    key: "RoleTypeFormat",
                    title: "所属角色",
                    type: store.getters.ColumnType.SHORTTEXT,

                },
                {
                    title: "操作",
                    width:"300px",
                    key: "Operate",
                    type: store.getters.ColumnType.USERDEFINED,
                },
            ],
            formData: {
            },
            editModalFormRules: {
                "UserName": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Password": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Email": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ImageUrls": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Name": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "PhoneNumber": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            var reg = /^1[34578]\d{9}$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确的手机号'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                ],
                "Birth": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "RoleType": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

            },

            listLoading: false,
        }
    },
    created() {

    },
    methods: {
        /**
        * 点击新增或者编辑的时候会触发
        */
        async ShowEditModal(Id) {

            let { Data } = await this.$Post(`/User/Get`, { Id: Id });
            this.formData = Data;
            this.editorShow = true;

        },

        /**
       * 点击保存的时候会触发
       */
        async CreateOrEditForm() {

            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    var { Success } = await this.$Post(`/User/CreateOrEdit`, this.formData);
                    if (Success) {
                        this.editorShow = false;
                        this.$refs.PaginationTableId.Reload(this.searchForm);
                    }
                }
            })
        },

        async SearchClick() {
            this.$refs.PaginationTableId.Reload(this.searchForm);
        },
        /**
       * 点击清空表单会触发
       */
        async ResetClick() {
            this.searchForm = {};
            this.$refs.PaginationTableId.Reload(this.searchForm);
        },
        /**
       * 单个删除的时候会触发
       */
        async ShowDeleteModal(Id) {
            await this.$PostDelete(`/User/Delete`, { Id: Id });
            this.$refs.PaginationTableId.Reload(this.searchForm);
        },
    }
}
</script>

<style scoped></style>